<template>
	<view>
		<img :src=detailList.imgUrl alt="" mode="widthFix" class="news-img">
		<NewsTab :list="detailList"></NewsTab>
		<view class="bottom-menu">
			<view class="bottom-menu-icon" @click="joinCart(detailList)">
				<view class="iconfont icon-gouwuchetianjia icon-common"></view>
				<view class="bottom-menu-left">加入购物车</view>
			</view>
			<view class="bottom-menu-btn">加入学习</view>
		</view>
	</view>
</template>

<script>
	import NewsTab from './components/NewsTab.vue'
	export default{
		components: {
			NewsTab
		},
		data() {
			return {
				detailList: []
			}
		},
		methods: {
			joinCart(detailList){
				this.$store.commit('joinCart', detailList)
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			let detaiListAjax = [
				{"id": "001","imgUrl": "//edu-image.nosdn.127.net/f948e777-7638-47f8-bd4f-867aca4f4984.jpg?imageView&quality=100&thumbnail=336y190","title": "跟阿秋一起高效学习", "score": "9.8", "person": "3420", "price": "99", "priceog": "￥199"},
				{"id": "002", "imgUrl": "//edu-image.nosdn.127.net/432fabe1-980e-419f-8c17-463c4aa6f0ad.png?imageView&quality=100&thumbnail=336y190", "title": "25堂通识阅读课 带你打破知识边界", "score": "9.6", "person": "2620", "price": "288" , "priceog": "￥399"},
				{"id": "003", "imgUrl": "//edu-image.nosdn.127.net/65FC4C4DF9049CBCDC358D06FE41E65A.jpg?imageView&quality=100&thumbnail=336y190", "title": " 跟简七学理财", "score": "9.7", "person": "2320", "price": "158", "priceog": "￥389"},
				{"id": "004", "imgUrl": "//edu-image.nosdn.127.net/4db53305-28cd-49fb-9c40-25968a35a572.jpg?imageView&quality=100&thumbnail=336y190", "title": "能帮你赚到钱的50节商业思维提升课", "score": "9.4", "person": "6420", "price": "588", "priceog": "￥699"}
			]
			if(option.id == "001"){
				this.detailList = detaiListAjax[0]
			}else if(option.id == "002"){
				this.detailList = detaiListAjax[1]
			}else if(option.id == "003"){
				this.detailList = detaiListAjax[2]
			}else if(option.id == "004"){
				this.detailList = detaiListAjax[3]
			}
		// 	uni.request({
		// 	    url: '../../static/mock/detail.json', //仅为示例，并非真实接口地址。
		// 	    data: {
		// 	        text: 'uni.request'
		// 	    },
		// 		dataType: 'json',
		// 	    header: {
		// 	        'custom-header': 'hello' //自定义请求头信息
		// 	    },
		// 	    success: (res) => {
		// 			this.text = 'request success';
		// 			const data = res.data;
		// 			if(option.id == "001"){
		// 				this.detailList = data.detailList[0]
		// 			}else if(option.id == "002"){
		// 				this.detailList = data.detailList[1]
		// 			}else if(option.id == "003"){
		// 				this.detailList = data.detailList[2]
		// 			}else if(option.id == "004"){
		// 				this.detailList = data.detailList[3]
		// 			}
		// 	    }
		// 	});
			
		}
	}
</script>

<style lang="stylus" scoped>
	@import '@/static/css/varibles.styl'
	@import '@/static/css/iconfont.css'
	.news-img 
		width:100%
	.bottom-menu
		width:93%
		padding:3.5%
		background:#f6f6f6
		border-top:1px solid #eee
		position:fixed
		bottom:0
		left:0
		display:flex
		.bottom-menu-icon
			width:200rpx
			text-align:center
			.icon-common
				font-size:48rpx
			.bottom-menu-left
				font-size:20rpx
		.bottom-menu-btn
			width:460rpx
			background:$bgColor
			color:#FFF 
			font-size:30rpx
			border-radius:50rpx
			text-align:center
			line-height:80rpx
</style>
